import React, { useState } from "react";
import { Card, ConfigProvider, Divider, Menu } from "antd";
import defaultImg from "@/assets/images/defaultUser01.png";
import { useAppSelector } from "@/store";
import { MenuV4Style } from "@/styles";
import BaseView from "./base";
import TagList, { TagsType } from "./components/tagList";
import NotificationView from "./notification";
import SystemView from "./system";
import { useStyle } from "./useStyle";

const AccountSettings = () => {
  const styles = useStyle();

  const [mode, setMode] = useState<"inline" | "horizontal">("inline");
  const [selectKey, setSelectKey] = useState<view>("base");
  const user = useAppSelector((state) => state.user.user);

  // 约束一下
  type view = "base" | "system" | "notification" | "binding";
  type menuItemType = { key: view; label: string };
  type menuMapType = menuItemType[];
  const menuMap: menuMapType = [
    { key: "base", label: "基本信息" },
    { key: "system", label: "系统设置" },
    { key: "notification", label: "通知订阅" },
  ];

  const renderItems = () => {
    switch (selectKey) {
      case "base":
        return <BaseView />;
      case "system":
        return <SystemView />;
      case "binding":
        return <BaseView />;
      case "notification":
        return <NotificationView />;
      default:
        break;
    }
    return null;
  };

  const getLable = (one: view) => {
    const item = menuMap.find((obj) => obj.key === one);
    return item?.label || "";
  };

  const tags: TagsType = [
    { key: "0", label: "处方" },
    { key: "1", label: "毒" },
    { key: "3", label: "麻" },
  ];

  return (
    <div css={styles.mainClassName}>
      <div css={styles.leftMenuClassName}>
        <div>
          <div css={styles.avatarClassName}>
            <img css={styles.avatarImg} src={defaultImg} alt="avatar" />
            <div css={styles.nameClassName}>{user?.name}</div>
            <div>
              {user?.description}
              <Divider type="vertical" />
              {user?.telephone}
            </div>
          </div>
          <Divider dashed />
          <TagList tags={tags} />
        </div>
        <Divider style={{ marginTop: 16 }} dashed />
        {/* 只更改 menu 的圆角 */}
        <ConfigProvider
          theme={{
            // 参考 menu/demo/menu-v4.tsx
            components: {
              Menu: MenuV4Style,
            },
          }}
        >
          <Menu
            mode={mode}
            selectedKeys={[selectKey]}
            onClick={({ key }) => {
              setSelectKey(key as view);
            }}
            items={menuMap}
            style={{ borderInlineEnd: "none" }}
          />
        </ConfigProvider>
      </div>

      <div css={styles.rightClassName}>
        <div css={styles.titleClassName}>{getLable(selectKey)}</div>
        {renderItems()}
      </div>
    </div>
  );
};

export default AccountSettings;
